<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="icons/iconfont.css"/>
		<style type="text/css">
			*{margin:0;padding:0;font-family: "微软雅黑";}
			ul,li{list-style: none;}
			a{text-decoration: none;}
			html,body{height:100%;}
			#out{height:100%;display: -webkit-box;-webkit-box-orient: vertical;}
			header{position:relative;height:80px;line-height: 80px;background:#ab1b1a;color:#fff;text-align: center;}
			header h1{font-size: 36px;font-weight: normal;}
			header a{position: absolute;right:20px;top:15px;display: block;width:105px;height:50px;line-height: 50px;border-radius:12px;box-shadow: 0 0 10px #333;color:#fff;}
			.heji{height:90px;font-size: 28px;line-height: 90px;padding-left:20px;background:#747474;color:#fff;}
			.heji b{display: inline-block;width:200px;font-weight: normal;}
			.heji i{font-style:normal;color:#aa1c1a;}
			article{-webkit-box-flex: 1;background: #f3f4f6;overflow: hidden;}
			.goodList li{padding:20px 0 20px 30px;height:auto;overflow: hidden;border-bottom: 2px solid #ccc;position: relative;}
			.goodImg{float:left;}
			.goodImg img{width:175px;height:175px;}
			.goodDet{float:left;font-size: 28px;width:325px;padding-left:25px;height:175px;}
			.goodDet p{height:80px;line-height: 40px;overflow: hidden;}
			.iPrice i{font-style:normal;color:#c2585a;}
			.amount button{width:60px;height:45px;background: #767676;color:#fff;border-radius: 10px;line-height: 45px;}
			.amount span{display: inline-block;width:75px;height:45px;background:#fff;text-align: center;border:1px solid #ccc;line-height: 45px;vertical-align:middle;}
			.del{position: absolute;top:30px;right:30px;font-size: 36px;}
			.iGood{display: none;}
			footer{height:94px;background:#484850;display: -webkit-box;}
			footer span{-webkit-box-flex: 1;padding-top:14px;display: block;text-align: center;color:#fff;}
			footer span b{display: block;line-height: 38px;font-size: 24px;font-weight: normal;}
			footer span a{color:#fff;}
			footer .redBg{background:#bf1b19;color:#fff;}
		</style>
	</head>
	<body>
		<section id="out">
			<header>
				<h1>购物车</h1>
				<a href="javascript:;">结算</a>
			</header>
			<section class="heji">
				<b>商品数量：<span></span></b>
				应付总额（不含运费）:&nbsp;<i class="zPrice"></i>
			</section>
			<article class="wrapper">
				<ul class="goodList">
					<li class="iGood">
						<a class="goodImg" href="javascript:;"><img src=""/></a>
						<section class="goodDet">
							<p></p>
							<span class="iPrice">单价：<i>¥199</i></span>
							<section class="amount">
								数量：
								<button class="jian">-</button>
								<span>1</span>
								<button class="jia">+</button>								
							</section>
						</section>
						<i class="iconfont del">&#xe68d;</i>
					</li>
				</ul>
			</article>
			<footer>
				<span><a href="index1.html"><i class="iconfont">&#xe644;</i><b>首页</b></a></span>
				<span><a href="good.html"><i class="iconfont">&#xe692;</i><b>分类</b></a></span>
				<span class="redBg"><a href="shopcar.html"><i class="iconfont">&#xe61b;</i><b>购物车</b></a></span>
				<span><a href="myshow.html"><i class="iconfont">&#xe646;</i><b>我的秀</b></a></span>
				<span><i class="iconfont">&#xe660;</i><b>设置</b></span>			
			</footer>
		</section>
		<script src="js/jquery183.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iscroll.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				bodyScale(640);		
				var user=localStorage.getItem('user');
				var goodID=null;
				if(user){
					$.ajax({		//生成购物车商品列表
						type:"get",
						url:"http://datainfo.duapp.com/shopdata/getCar.php",
						async:true,
						data:{userID:user},
						dataType:'jsonp',
						success:function(data){
							console.log(data)
							$.each(data, function(i,v) {
								$('.iGood:eq(0)').clone().addClass('goodN').css({display:"block"}).appendTo($('.goodList')).find('p').text(v.goodsName).end().find('.iPrice i').text("¥"+v.price).end().find('.amount span').text(v.number).end().find('.goodImg img').attr({src:v.goodsListImg});
							});
							goodsNum();		//加载完成后执行一次更新购物车数量和总价
							goodsPrice();
							
						}
					});
				}
				
				$('.goodList').on('tap',".jian",function(){	//绑定减号事件，注意这里一定用事件委托
					console.log(1)
					var n=$(this).siblings("span").text();
					n--;
					if(n==0){
						n=1
					}					
					$(this).siblings("span").text(n);
					goodsNum();
					goodsPrice();
				})
				$('.goodList').on('tap',".jia",function(){	//绑定加号事件
					var n=$(this).siblings("span").text();
					n++;
					if(n==99){
						n=99;
					}
					$(this).siblings("span").text(n);
					goodsNum();
					goodsPrice();
				})
				$('.goodList').on('tap',".del",function(){	//绑定删除商品事件
					var goodName=$(this).siblings('.goodDet').find('p').text();
					$(this).parent().remove();
					goodsNum();
					goodsPrice();
					$.ajax({
						type:"get",
						url:"http://datainfo.duapp.com/shopdata/selectGoodes.php",
						async:true,
						data:{selectText:encodeURI(goodName)},
						dataType:'jsonp',
						success:function(data){
							goodID=data[0].goodsID;	//得到商品id后，
							$.ajax({				//更新后台购物车信息
								type:"get",
								url:"http://datainfo.duapp.com/shopdata/updatecar.php",
								async:true,
								data:{
									userID:user,
									goodsID:goodID,
									number:0
								},
								dataType:'json',
								success:function(data){
									console.log(data)
								}
							});							
						}
					});
					
				})
				
				function goodsNum(){	//计算购物车数量
					var n=0;
					$.each($('.goodN'), function(i,v) {
						n+=parseInt($(this).find('.amount span').text());
					});
					$('.heji span').text(n);
				}
				function goodsPrice(){	//计算购物车总价
					var n=0;
					$.each($('.goodN'), function(i,v) {
						var x=$(this).find('.iPrice i').text().substring(1);
						var y=parseInt($(this).find('.amount span').text())
						n+=x*y;
					});					
					$('.zPrice').text("¥"+n)
				}
				setTimeout(function(){     //这里加个延迟，不然第一次无法滑动，需要等图片列表生成高度
					var myScroll=new IScroll('.wrapper',{
						    mouseWheel: true,
						    scrollbars: true
					});
				},400)
				function bodyScale(n){	//屏幕宽度自适应
					var devicewidth=document.documentElement.clientWidth;
					var scale=devicewidth/n;
					document.body.style.zoom=scale;
				}
				window.onresize=function(){
						bodyScale(640);
				}
			})
		</script>
	</body>
</html>
